<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js" ></script>
</head>
<body>
<div id="app">
  <counter-a v-bind:title="title" v-on:change-num="changeNum" ></counter-a>
  <counter-a v-bind:title="title" v-on:change-num="changeNum" ></counter-a>
  <counter-a v-bind:title="title" v-on:change-num="changeNum" ></counter-a>
  <counter-a v-bind:title="title" v-on:change-num="changeNum" ></counter-a>

 总数：{{totalNum}}
</div>
<script>


    const MyCounter={
        data:function () {
            return {
                counter:0
            }
        },
        //定义属性
        props:[
            'title'
        ],
        template:`
        <div>{{title}}: {{counter}}
            <button @click="addOpt">+</button>
            <button @click="subOpt">-</button>

        </div>
        `,
        methods:{
            addOpt:function (  ) {
                this.counter++
                this.$emit('change-num',1)
            },
            subOpt:function () {
                this.counter--
                this.$emit('change-num',-1)
            }
        }


    }



    const  vm = new Vue(
        {
            el:"#app",
            data:{
                totalNum:0,
                message:'Hello Vue!',
                title:'我的计数器'
            } ,
            components:{
                'counterA':MyCounter
            },
            methods:{
                changeNum:function (value) {
                    this.totalNum+=value
                }
            }
        }
    )

</script>


</body>
</html>